<div ngCombobox filterMode="auto-select">
  <div #origin class="retro-autocomplete">
    <span class="search-icon material-symbols-outlined" translate="no">search</span>
    <input
      aria-label="Label dropdown"
      placeholder="Select a country"
      [(ngModel)]="query"
      ngComboboxInput
    />
  </div>

  <ng-template ngComboboxPopupContainer>
    <ng-template
      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
      [cdkConnectedOverlayOpen]="true"
    >
      <div class="popup">
        @if (countries().length === 0) {
          <div class="no-results">No results found</div>
        }

        <div ngListbox>
          @for (country of countries(); track country) {
            <div ngOption [value]="country" [label]="country">
              <span class="option-label">{{country}}</span>
              <span class="check-icon material-symbols-outlined" translate="no">check</span>
            </div>
          }
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>
